<template>
  <div>
    <el-form :model="form" label-width="120px" ref="dataForm">
      <el-form-item label="角色名称" prop="roleName" :rules="rules.isRange('1-10')">
        <el-input v-model="form.roleName" placeholder="请输入角色名称" maxlength="10" show-word-limit/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" placeholder="请输入备注" maxlength="64" show-word-limit/>
      </el-form-item>
      <el-form-item label="">
        <el-button icon="el-icon-check" type="primary" :loading="isDisabled" size="mini"
                   @click.native="saveOrUpdate(form, '/sysRole/save', '/sysRole/update')">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        rules: this.getRules(),
        isDisabled: false,
        form: {
          roleName: '',
          remark: '',
          flag: 1
        }
      }
    },
    created () {
      console.info('接收到参数信息: ')
      console.info(this.$route.params)
      this.init(this.$route.params.roleId)
    },
    methods: {
      init (id) {
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
        this.form.id = id
        if (id) {
          this.$http({
            url: this.$http.adornUrl('/sysRole/info/' + id)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.form = data.data
            }
          })
        }
      }
    }
  }
</script>

